<template>
	<div class="order-detail-container">
		<!--商品列表-->
		<van-card v-for="item in order.detailList" :key="item.id" :num="item.count" :price="item.price"
			:title="item.product_name" :desc="item.product_spec" :thumb="APIDomainName+item.product_pic" />
		<!-- 订单备注 -->
		<van-cell title="订单备注" :value="order.remark" label="" />
		<!-- 配送信息 -->
		<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
		<!-- 收货地址 -->
		<van-cell title="收货地址">
			<template #label>
				<div>{{ order.receiver }} {{ order.phone }}</div>
				<div>{{ order.address}}</div>
			</template>
		</van-cell>
		<!--费用信息-->
		<van-cell title="商品金额" :value="`¥${orderAmount}`" />
		<van-cell title="运费" :value="`¥0.00`" />
		<van-cell title="总价" :value="`¥${orderAmount}`" />
		<!-- 去支付按钮 -->
		<div v-if="order.id && order.status==0">
			<van-button type="primary" size="large" @click="onClickPay">去支付</van-button>
		</div>
		<!-- 删除按钮 -->
		<div v-if="order.id">
			<van-button type="danger" size="large" @click="onClickDelete">删除订单</van-button>
		</div>
	</div>
</template>

<script>
	import { showToast } from 'vant';
	import { getOrderDetailByIdAPI, deleteOrderByIdAPI } from "@/api/order.js";
	export default {
		data() {
			return {
				id: parseInt(this.$route.query.id) || 0, //注意路由传参的方式
				order: { detailList: [] },
			};
		},

		// 计算属性
		computed: {
			//计算一个订单的总金额
			orderAmount() {
				let amount = 0;
				this.order.detailList.forEach(item => {
					amount += item.count * item.price;
				});
				return amount.toFixed(2);
			},
		},
		//生命周期钩子函数
		created() {
			this.getOrderDetail();
		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				getOrderDetailByIdAPI(this.id).then(result => {
					this.order = result.data;
				});
			},
			//触发支付
			onClickPay() {
				showToast('还未实现....');
			},

			//触发删除订单
			onClickDelete() {
				deleteOrderByIdAPI(this.id).then(() => {
					showToast("订单已删除");
					setTimeout(() => {
						this.$router.back();
					}, 1000);
				});
			},

		},
	};
</script>

<style lang="less" scoped>
	.van-card {
		margin: 10px;
		border-radius: 10px;
	}

	.van-card__content {
		justify-content: space-evenly;
	}

	.van-card__title {
		font-size: 14px;
	}

	.van-card__num {
		font-size: 14px;
		color: black;
	}
</style>